<template>
<!-- 统计信息-item -->
    <div class="center-statistic-item">
        <div class="title">{{data.name}}</div>

        <div class="data">
            <div class="data-title">共有</div>&nbsp;
            <div class="data-num">{{`${data.total}${data.counttypename || ''}`}}</div>
        </div>
        <div class="data">
            <div class="data-title">已用 </div>&nbsp;
            <div class="data-num">{{`${data.used}${data.counttypename || ''}`}}</div>
        </div>
        <div class="data">
            <div class="data-title">剩余 </div>&nbsp;
            <div class="data-num">{{`${data.surplus}${data.counttypename || ''}`}}</div>
        </div>

        <div class="buy" v-if="data.isshow == '1'" @click="$emit('buy',data.rowguid)">去购买</div>


    </div>
</template>

<script>

export default {
    components:{

    },
    props: {
        data: {
            type: Object,
            default: (() => {})
        },
 
    },
    data() {
        return {

        }
    },
    methods: {
        /**
         * 有效期类型
         * @param {String} type 类型
         * @returns {String} 类型
         */
        timeLimitType(type) {
            let switchObj = {
                '1':function(){
                    return '月'
                },
                '2':function(){
                    return '年'
                },
                '3':function(){
                    return '季度'
                },
                '4':function(){
                    return '天'
                },
                '5':function(){
                    return '周'
                },
            } 

           return switchObj[type]();
        },
    },
}
</script>

<style lang="scss" scoped>
@import '@css/var.scss';    
$bcgColor:#f3f4f6;
$textColor:#9e9e9f;
.center-statistic-item{
    box-sizing: border-box;
    width: 135px;
    padding: 9px 10px;
    // background-color: $bcgColor;
    
    .title {
        font-weight:600;
    }

    .data {
        display: flex;
        align-items: center;
        margin-top: 13px;

        .data-title{
            color: #9e9e9f;
            font-size: 12px;
        }
        
        .data-num {
            font-size: 14px;
            font-weight:600;
        }

    }

    .buy {
        margin-top: 15px;
        font-size: 12px;
        color: $primaryColor;
        cursor: pointer;
    }
}
</style>